<template>
    <div class="geo-customer" v-if="!isMobile">
        <el-row :gutter="16">
            <el-col :span="12" class="mb-16px">
                <AQData />
            </el-col>
            <el-col :span="12" class="mb-16px">
                <AQRank />
            </el-col>
            <el-col :span="12">
                <ProblemPercentage />
            </el-col>
            <el-col :span="12">
                <PlatformPercentage />
            </el-col>
        </el-row>
        <div class="mt-16px content-container">
            <MarketingReport />
        </div>
    </div>
    <div class="geo-customer" v-else>
        <el-row :gutter="16">
            <el-col :span="24" class="mb-16px">
                <MAQData />
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="24" class="mb-16px">
                <MAQRank />
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="24" class="mb-16px">
                <MProblemPercentage />
            </el-col>
        </el-row>
        <el-row :gutter="16">
            <el-col :span="24" class="mb-16px">
                <MPlatformPercentage />
            </el-col>
        </el-row>
        <div class="content-container" id="report">
            <MMarketingReport @update:scroll="handleScroll" />
        </div>
    </div>
</template>

<script setup lang="ts">
import AQData from './components/AQData.vue'
import MAQData from './components/MAQData.vue'
import AQRank from './components/AQRank.vue'
import MAQRank from './components/MAQRank.vue'
import ProblemPercentage from './components/ProblemPercentage.vue'
import MProblemPercentage from './components/MProblemPercentage.vue'
import PlatformPercentage from '@/views/geo/report/components/PlatformPercentage.vue'
import MPlatformPercentage from './components/MPlatformPercentage.vue'
import MarketingReport from '@/views/geo/report/components/MarketingReport.vue'
import MMarketingReport from './components/MMarketingReport.vue'

import { useHead } from '@vueuse/head'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()

const WIDTH = 768

const isMobile = computed(() => width.value < WIDTH)

useHead({
    title: 'GEO：引擎之上，生成万象 - 兴旺宝',
})

function handleScroll(){
    nextTick(() => {
          document.getElementById("report")?.scrollIntoView({
            behavior: "smooth",  // 平滑过渡
            block: "start"  // 上边框与视窗顶部平齐。默认值
        })
    })
}

</script>

<style lang="scss" scoped>

</style>